<template>
	<view class="home">
		<view class="search" @click="goleft">
			<u-search placeholder="关键字搜索" searchIconColor="#00C777" borderColor="#00C777" color="#00C777"
				@custom="goleft" @focus="goleft"></u-search>
		</view>
		<view class="banner">
			<AdBnner :list="list1" height="200"></AdBnner>
		</view>
		<view class="notice">
			<view class="A">
				通知栏：
			</view>
			<u-notice-bar :text="text" fontSize="13" color="#00C777" bgColor="#fff" @click="goNotice"></u-notice-bar>
		</view>
		<view class="Nav-main">
			<view class="left" @click="goleft">
				<!-- <image src="@/static/icon/supply.png"  @click="clickLeft" radius="6">
				</image> -->
				<view class="gydt">
					供应大厅
				</view>
				<view class="jddh">
					现场拍照，基地导航
				</view>
				<view class="buy">
					我要卖⊕
				</view>
				<view class="zjsc">
					花卉苗木
				</view>
				<view class="zj">
					<div></div>
				</view>
			</view>
			<view class="right" @click="goRight">
				<!-- <image src="@/static/icon/wantBuy.png" @click="clickRight" radius="6">
				</image> -->
				<view class="gydt">
					求购大厅
				</view>
				<view class="jddh">
					工程直采，现金交易
				</view>
				<view class="buy">
					我要买⊕
				</view>
				<view class="zjsc">
					集采报价
				</view>
				<view class="zj">
					<div></div>
				</view>
			</view>
		</view>
		<u-empty text="暂无数据哦~~" mode="list" v-if="ImgData.length==0" margin-top='50'></u-empty>
		<view class="freshSupply" @click="pullFresh">
			一键刷新
		</view>
		<view class="freshSupply1">
			<button open-type="contact" bindcontact="handleContact" style="" session-from="sessionFrom"
				class="contact">客服</button>
		</view>
		<view class="VIPImg">
			<!-- <u--image :src="item.src" width="60" height="60" class="itemImg"></u--image> -->
			<view class="img-container" v-for="item in ImgData" @click="toSupply(item.id)">
				<image mode="scaleToFill" :src="item.avatar"></image>
			</view>
		</view>
		<bottomShow :showPop="showBottom" :title="bottomTitle" :tip="bottomTip" @refuse="refuse" @submit="subFresh">
		</bottomShow>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		homeCarouselList,
		userTopList,
		noticeNew,
		systemConfig,
		refreshSupply
	} from '@/request/api.js'
	import bottomShow from '@/components/common/bottomShow.vue'
	import {
		AdBnner
	} from "@/components/ad-banner/ad-banner.vue"
	export default {
		components: {
			AdBnner,
			bottomShow
		},
		data() {
			return {
				count: 4,
				keyword: '',
				text: '',
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				noticeList: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				list1: [

				],
				ImgData: [],
				showTitle: false,
				showBottom: false,
				sysConfig: null,
				bottomTip: '',
				bottomTitle: ''
			};
		},
		mounted() {},
		onReachBottom() {
			// this.$refs.community.reachBottom()
		},
		onShareAppMessage() {
			return {
				title: '苗木超市',
				path: '/pages/index/index',

			}
		},
		onShareTimeline: function() {
			return {
				title: '苗木超市',
				path: '/pages/index/index',
			}
		},
		onPullDownRefresh() {
			this.getLiveAndBanner()
			this.getUserTopList()
			this.getNoticeNew()
			this.getConfig()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			toSupply(e){
				uni.navigateTo({
					url:'/my_pages/my_supply/supply?id=' + e
				})
			},
			getConfig() {
				systemConfig().then(res => {
					this.sysConfig = res.data
					console.log(this.sysConfig)
				})
			},
			refuse() {
				this.showBottom = false
			},
			subFresh() {
				this.getRefreshSupply()
			},
			getRefresh() {
				if (this.sysConfig.sys_config.refurbish_integral != 0) {
					this.bottomTitle = '一键刷新'
					this.bottomTip = '提示：普通会员一键刷新需要充值积分，黄金会员或者钻石会员一键刷新免费！'
					this.showBottom = true
				} else {
					this.getRefreshSupply()
				}

			},
			getRefreshSupply() {
				refreshSupply().then(res => {
					if (res.code == 1) {
						this.$refs.uToast.show({
							type: 'success',
							title: '一键刷新电话成功',
							message: "一键刷新成功",
						})
						uni.switchTab({
							url: "/pages/supply/supply"
						})
					}
				})
				this.showBottom = false
			},
			pullFresh() {
				this.getRefresh()
			},
			goleft() {
				uni.switchTab({
					url: "/pages/supply/supply"
				})
			},
			goRight() {
				getApp().globalData.switchId = 'index'
				uni.switchTab({
					url: "/pages/upload/upload?goFrom=index"
				})
			},
			goNotice() {
				uni.navigateTo({
					url: '/pages/index/noticeList/noticeList'
				})
			},
			click1() {},
			change() {},
			clickLeft() {
				uni.switchTab({
					url: '/pages/bottom-nav/want/want'
				})
			},
			search() {
				this.getLiveAndBanner()
			},
			/* 首页直播及banner */
			getLiveAndBanner() {
				homeCarouselList().then(res => {
					// console.log(res, 111)
					this.list1 = []
					if (res.msg = "成功") {
						res.data.forEach(item => {
							this.list1.push(item.img)
						})
						console.log(this.list1)
					}
				})
			},
			getUserTopList() { //商户头像
				userTopList().then(res => {
					if (res.msg = "成功") {
						this.ImgData = res.data
						console.log(this.ImgData)
					}
				})
			},

			getNoticeNew() { //最新通知
				noticeNew().then(res => {
					// console.log(res, 333)
					if (res.msg = "成功") {
						this.text = res.data.title
					}
				})
			}
		},
		onLoad() {
			this.getLiveAndBanner()
			this.getUserTopList()
			this.getNoticeNew()
			this.getConfig()
			// this.hotProjectFn()
			// uni.$on('setCity',e=>{
			// 	console.log(e,'选择城市的信息');
			// 	this.city = e.name
			// })
		}
	}
</script>
<style>
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.freshSupply {
		font-size: 24rpx;
		display: flex;
		color: #fff;
		justify-content: center;
		padding: 18rpx;
		border-radius: 50%;
		position: fixed;
		bottom: 20px;
		right: 20rpx;
		background: #00c777;
		text-align: center;
		width: 30px;
		height: 30px;
		    align-items: center;
	}

	.freshSupply1 {
		font-size: 24rpx;
		display: flex;
		color: #fff;
		justify-content: center;
		padding: 18rpx;
		border-radius: 50%;
		position: fixed;
		bottom: 70px;
		right: 20rpx;
		background: #00c777;
		text-align: center;
		width: 30px;
		height: 30px;
		overflow: hidden;
		align-items: center;
	}

	::v-deep {
		button::after {
			border: 0 !important;
		}
	}

	.contact {
		background: #00c777;
		color: #fff;
		font-size: 24rpx;
		padding: 0;
		width: 100%;
	}

	.notice {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 15rpx 0;
		padding: 0 15px;

		.A {
			background-image: url();
			background-size: contain;
			background-repeat: no-repeat;
			color: #fff;
			padding: 5rpx 14rpx;
		}
	}

	.Nav-main {
		height: 155px;
		position: relative;
		display: flex;
		justify-content: space-around;
		padding: 20rpx;

		image {
			height: 150px;
			width: 90%;
		}

		.left {
			display: inline-block;
			height: 155px;
			width: 43%;
			// margin: 0 4%;
			position: relative;
			border-radius: 26px;
			border: 1px solid #cccccc29;
			background: #fff;

			.zj {
				border: 38px solid #00C777;
				border-left: 38px solid transparent;
				border-top: 38px solid transparent;
				border-bottom-right-radius: 20px;
				content: "";
				position: absolute;
				width: 0;
				bottom: 0;
				right: 0;
			}

			.zjsc {
				transform: rotate(-45deg);
				position: absolute;
				bottom: 17px;
				right: 0;
				z-index: 1;
				color: #fff;
			}

			.jddh {
				text-align: center;
				color: #00C777;
				font-size: 26rpx;
			}

			.gydt {
				text-align: center;
				color: #00C777;
				font-size: 40rpx;
				margin: 10px 0;
			}

			.buy {
				margin-left: 3px;
				margin-top: 30px;
				background: #00C777;
				width: 75px;
				font-size: 28rpx;
				text-align: center;
				padding: 6px 1px;
				border-radius: 12px;
				color: #fff;
				position: absolute;
				bottom: 20px;
			}
		}

		.right {
			height: 155px;
			width: 43%;
			position: relative;
			border-radius: 26px;
			border: 1px solid #cccccc29;
			display: inline-block;
			background: #fff;

			.zj {
				border: 38px solid #FFAB68;
				border-left: 38px solid transparent;
				border-top: 38px solid transparent;
				border-bottom-right-radius: 20px;
				content: "";
				position: absolute;
				width: 0;
				bottom: 0;
				right: 0;
			}

			.zjsc {
				transform: rotate(-45deg);
				position: absolute;
				bottom: 17px;
				right: 0;
				z-index: 1;
				color: #fff;
			}

			.jddh {
				text-align: center;
				color: #FFAB68;
				font-size: 26rpx;
			}

			.gydt {
				text-align: center;
				color: #FFAB68;
				font-size: 40rpx;
				margin: 10px 0;
			}

			.buy {
				margin-left: 3px;
				margin-top: 30px;
				background: #FFAB68;
				width: 75px;
				text-align: center;
				padding: 6px 1px;
				border-radius: 12px;
				color: #fff;
				position: absolute;
				font-size: 26rpx;
				bottom: 20px;
			}
		}
	}

	.VIPImg {
		display: flex;
		flex-wrap: wrap;
		width: 100%;

		.img-container {
			width: 16.666%;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			margin-top: 10rpx;

			image {
				height: 125rpx;
				width: 96%;
			}
		}

	}

	.search {
		padding: 20rpx;
		background: #00C777;
	}

	::v-deep .u-search__action {
		color: #fff !important;
	}
</style>
